<template>
  <div class="box">
    <template v-for="(item, index) in store.userInfos" :key="index">
      <el-row>
        <el-col :span="20">
          <div class="group_list">
            <div class="group_item">{{ item.groupName }}</div>
            <span class="group_text">群主：{{ item.groupLeader }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button style="margin-top: 20px">加入</el-button></el-col
        >
      </el-row>
    </template>
  </div>
</template>

<script setup lang="ts">
import { useMainStore } from "@/store/main";
const store = useMainStore();
</script>

<style scoped>
.box {
  width: 100%;

  padding: 10px;
}
.group_list {
  width: 100%;
  height: 70px;
  padding: 5px;
  text-align: left;
  line-height: 35px;
}
.group_item {
  font-size: 30px;
}
.group_text {
  font-size: 12px;
}
</style>
